<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历数据</title>
</head>

<body>
    <div id="app">
        <p>用户：</p>
        <ul>
            <!-- v-for 遍历数组-->
            <li v-for="(value,index) in data.users">
                [{{index}}]={{value}}
            </li>
        </ul>
        <!-- v-for 遍历对象 -->
        <p>网站信息：</p>
        <ul>
            <!-- 属性值 属性名 索引 这三个参数的位置不能乱 -->
            <!-- 可以结合动态属性绑定 给标签的对应属性赋值-->
            <li v-for="(value,key,index) in data.web" :title="value" :key="index">
                [{{index}}]web.{{key}}={{value}}
            </li>
        </ul>
        <p>学生信息：</p>
        <ul>
            <li v-for="(value,index) in data.students" :title="value.name" :key="index">
                [{{index}}]={学生姓名:{{value.name}},学生班级:{{value.class}}}
            </li>
        </ul>
        <!-- v-for 结合 v-if 实现过滤 -->
        <p>1班学生信息</p>
        <ul>
            <!-- template 用于渲染重复元素 
             如果使用 div 则在 DOM 中会有多个 div 每个只包含一个 li 元素 
             而使用 template DOM 中只会有多个 li 元素，不会有额外元素
             -->
            <template v-for="(value,index) in data.students">
                <li v-if="value.class=='1班'" :title="value.name" :key="index">
                    [{{index}}]={学生姓名:{{value.name}},学生班级:{{value.class}}}
                </li>
            </template>
        </ul>

    </div>
    <script type="module">
        import { createApp, reactive } from '../00-dependency/vue.esm-browser.js'
        createApp({
            setup() {
                const data = reactive({
                    users: ['Tom', 'Dcsgo', 'Jerry'],
                    web: { title: 'Dcsgo', url: "dcsgo.com.cn" },
                    students: [
                        { name: "马超", class: "1班" },
                        { name: "张飞", class: "2班" },
                        { name: "关羽", class: "1班" },
                    ]
                })
                return {
                    data
                }
            }
        }).mount('#app')
    </script>
</body>

</html>